<template>
  <div class="container">
    <el-card style="height: 700px">
      <div class="pageTitle">
        <h2>通知中心</h2>
        <el-button text @click="toNewnotice"
          ><el-icon><CirclePlus /></el-icon
        ></el-button>
      </div>
      <div class="notice_list">
        <div style="width: 200px; background-color: #f2f2f2">
          <div
            :class="
              active === index ? 'notice_list_left tab' : 'notice_list_left'
            "
            :key="item"
            v-for="(item, index) in noticeNav"
            @click="tabNoticeTitle(item, index)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="notice_content">
          <div class="tabNoticeTitle">
            {{ title }}
          </div>
          <div class="content_item">
            <div class="notice_item" v-for="item in noticeList" :key="item">
              <div class="top">
                <p>通知人：{{ item.messageFromName }}</p>
                <p>通知类型：{{ item.messageTypeName }}</p>
                <p>通知时间：{{ item.notifyTime }}</p>
              </div>
              <p>通知内容：{{ item.messageText }}</p>
              <div style="display: flex; justify-content: space-between">
                <p>
                  通知范围：<span v-for="it in item.messageWideName" :key="it"
                    >{{ it }}&nbsp;
                  </span>
                </p>
                <div style="display: flex">
                  <p>
                    <el-tag
                      type="primary"
                      style="cursor: pointer"
                      @click="checkDetail(item)"
                      >详情</el-tag
                    >
                  </p>

                  <p style="margin-left: 20px" v-if="title !== '审批提醒'">
                    <el-tag
                      type="danger"
                      style="cursor: pointer"
                      @click="handelDelete(item)"
                      >删除</el-tag
                    >
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, watchEffect } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
import {
  NotificationsListApi,
  notificationDelectApi,
} from "@/api/messageNotifications/notificationsList.js";
const router = useRouter();
const unread = ref("2"); // 已读未读参数
const remind = ref("msg");
// 通知导航
const noticeNav = ref([
  { id: 1, name: "全部通知" },
  { id: 2, name: "未读通知" },
  { id: 3, name: "已读通知" },
  { id: 4, name: "审批提醒" },
]);
const title = ref("全部通知");
const active = ref(0);
// 切换导航
const tabNoticeTitle = (item, index) => {
  active.value = index;
  title.value = item.name;
};
const pageNum = ref(1);
const pageSize = ref(9999);
const total = ref(0);
// 通知列表
const noticeList = ref([]);
const getNotificationsListApi = async () => {
  let params = {
    onlyUnread: unread.value,
    type: remind.value,
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };
  const res = await NotificationsListApi(params);
  if (res.code === 200) {
    noticeList.value = res.rows;
    total.value = res.total;
  }
};
// 新建通知
const toNewnotice = () => {
  router.push({ path: "/create", query: { name: 1 } });
};

// 删除
const handelDelete = async (row) => {
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      if (row && row.id) {
        const res = await notificationDelectApi(row.id);
        if (res.code === 200) {
          // 删除成功的提示
          ElMessage.success(res.msg);
          await getNotificationsListApi();
        }
      }
    })
    .catch((err) => {
      // 用户点击取消执行的操作
      ElMessage.error(result.msg);
      console.log(err);
    });
};
// 查看详情
const checkDetail = (row) => {
  // console.log(row);
  if (row.messageTypeName && row.messageTypeName.includes("会议")) {
    router.push({
      path: "/myProject/information-info/addfile",
      query: { id: row.dataId, name: 3, messageTypeName: row.messageTypeName },
    });
  } else if (active.value !== 3) {
    router.push({
      path: "/detail",
      query: { id: row.id, name: 3 },
    });
  } else {
    // console.log(row.processTypeId, "--row.processTypeId ---");
    if (row.processTypeId === "1") {
      router.push({
        path: "/myProject/conversion-info/info",
        query: { planId: row.dataId, name: "3", showDetails: "2" },
      });
    } else if (row.processTypeId === "2") {
      router.push({
        path: "/taskManage/manage-add/add",
        query: { taskId: row.dataId, id: row.projectId, name: 3 },
      });
    } else if (row.processTypeId === "3") {
      router.push({
        path: "/myProject/archive-info/add",
        query: {
          name: 3,
          state: 2,
          archivistId: row.dataId,
          Approved: 1,
        },
      });
    } else if (row.processTypeId === "4") {
      router.push({
        path: "/myProject/review/again",
        query: { id: row.dataId, name: "3" },
      });
    } else if (row.processTypeId === "5") {
      router.push({
        // 日报
        path: "/myProject/information-info/details",
        query: { id: row.dataId, type: 1 },
      });
    } else if (row.processTypeId === "6") {
      // 周报
      router.push({
        // 日报
        path: "/myProject/information-info/details",
        query: { id: row.dataId, type: 2 },
      });
    } else if (row.processTypeId === "7") {
      // 月报
      router.push({
        // 日报
        path: "/myProject/information-info/details",
        query: { id: row.dataId, type: 3 },
      });
    } else if (row.processTypeId === "8") {
      router.push({
        path: "/returned/returned-add/add",
        query: { name: "5", id: row.dataId },
      });
    } else if (row.processTypeId === "9") {
      router.push({
        path: "/returned/returned-add/add",
        query: { name: "5", id: row.dataId, show: 1 },
      });
    } else if (row.processTypeId === "10") {
      // 项目立项审批
      router.push({
        path: "/myProject/approval/edit",
        query: { name: "3", id: row.dataId },
      });
    } else if (row.processTypeId === "11") {
      router.push({
        path: "/taskManage/manage-add/add",
        query: { taskId: row.dataId, name: "3", approvalTask: "1" },
      });
    } else if (row.processTypeId === "12") {
      // 项目转立项审批
      router.push({
        path: "/myProject/conversion-info/info",
        query: { name: "3", id: row.dataId, show: "2" },
      });
    } else if (row.processTypeId === "13") {
      router.push({
        path: "/seal/sealEdit/sealEdit",
        query: { name: "3", sealId: row.dataId, show: "1" },
      });
    } else {
      // 合同
      router.push({
        path: "/contract/add/add",
        query: { name: "3", id: row.dataId },
      });
    }
  }
};
watchEffect(async () => {
  // console.log(active.value);

  if (active.value === 0) {
    unread.value = "2";
    remind.value = "msg";
    await getNotificationsListApi();
  } else if (active.value === 1) {
    unread.value = "1";
    remind.value = "msg";
    await getNotificationsListApi();
  } else if (active.value === 2) {
    unread.value = "3";
    remind.value = "msg";
    await getNotificationsListApi();
  } else if (active.value === 3) {
    remind.value = "check";
    await getNotificationsListApi();
  }
});


onMounted(async () => {
  await getNotificationsListApi();
});


</script>

<style scoped lang="scss">
.container {
  padding: 20px;
  h2 {
    font-weight: 700;
  }
  .pageTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-button {
      font-size: 24px;
    }
  }
  .notice_list {
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: space-between;
    .notice_list_left {
      line-height: 50px;
      text-align: center;
    }
    .notice_list_left:hover {
      cursor: pointer;
    }
    .tab {
      color: #409eff;
    }
    .notice_content {
      flex: 1;
      background: #fff;
      .tabNoticeTitle {
        background-color: #f2f2f2;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        height: 50px;
        line-height: 50px;
      }
      .content_item {
        width: 100%;
        height: 550px;
        background: #f2f2f2;
        padding: 0 20px 20px 20px;
        overflow-y: auto;
        .notice_item {
          width: 100%;
          height: 150px;
          background: #fff;
          padding: 0 40px 20px 20px;
          margin-top: 20px;
          border-radius: 6px;
          .top {
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
}
</style>
